<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 声音</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id='doc-nav'>
		<ul id='doc-level-one'>
			<li>
				Topics
				<ul>
					<li>
						<a href='../documentation/'>
							文档
						</a>
					</li>
					<li>
						<a href='../documentation/entities.html'>
							实体
						</a>
					</li>
					<li>
						<a href='../documentation/events.html'>
							事件
						</a>
					</li>
					<li>
						<a href='../documentation/components.html'>
							组件
						</a>
					</li>
					<li>
						<a href='../documentation/2d.html'>
							2D绘图
						</a>
					</li>
					<li>
						<a href='../documentation/text.html'>
							文本
						</a>
					</li>
					<li>
						<a href='../documentation/keyboard.html'>
							键盘
						</a>
					</li>
					<li>
						<a href='../documentation/mouse.html'>
							鼠标
						</a>
					</li>
					<li>
						<a href='../documentation/sound.html'>
							声音
						</a>
					</li>
					<li>
						<a href='../documentation/sprites.html'>
							精灵
						</a>
					</li>
					<li>
						<a href='../documentation/scenes.html'>
							场景
						</a>
					</li>
					<li>
						<a href='../documentation/gameloop.html'>
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id='doc-content' class="markdown">
		

		<h2> 声音 </h2>
<p>Crafty 目前使用 audio 元素实现声音播放，这在一些浏览器中可能存在问题。将来我们计划迁移到 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API">Web Audio API</a> 。</p>
<h2 id="loading-audio">加载音频</h2>
<p>要播放一段音频，首先你要加载它。因为浏览器对音频格式的支持是不一致的，所以您可以提供音频文件的列表，并且 Crafty 将会加载第一个在当前环境支持的音频文件。关于加载资源的更多信息，见 <a href="../api/Crafty-loader.html">Crafty.load</a>.</p>
<pre><code><span class="hljs-comment">// Here we're just loading a single sound, and calling it "beep".</span>
<span class="hljs-comment">// But you can load multiple assets at once!</span>
<span class="hljs-keyword">var</span> assets = {
    <span class="hljs-string">"audio"</span>: {
        <span class="hljs-string">"beep"</span>: [<span class="hljs-string">"beep.wav"</span>, <span class="hljs-string">"beep.mp3"</span>, <span class="hljs-string">"beep.ogg"</span>]
    }
}
Crafty.load({assets,  callback})</code></pre>
<h2 id="playing-audio">播放音频</h2>
<p>声音加载完毕后，可以使用前面指定的名称播放它：</p>
<pre><code>Crafty.audio.play(<span class="hljs-string">"beep"</span>)</code></pre>
<p>你可以指定循环播放的次数和音量的大小：</p>
<pre><code><span class="hljs-comment">// Play the sound, repeating twice, at 75% volume:</span>
Crafty.audio.play(<span class="hljs-string">"beep"</span>, <span class="hljs-number">2</span>, <span class="hljs-number">0.75</span>)</code></pre>
<p>设定循环次数为  <code>-1</code>，将会无限循环播放。</p>
<pre><code>Crafty.audio.play(<span class="hljs-string">"beep"</span>, <span class="hljs-number">-1</span>)</code></pre>
<p>还可以静音、暂停和恢复回放。参见 <a href="../api/Crafty-audio.html">Crafty.audio</a></p>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
